<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="../static/element_ui/index.css"><!--rel="stylesheet"很重要，不加，css不会加载-->
    <style>
        body{
            margin: 0 0;
        }
        .el-header{
            background-image: url(../static/img/header.jpg) ;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="100px">
            <div style="margin-top:20px;float: right;width: 200px;height: 60px;text-align: center;line-height: 60px;">欢迎您，<span >{{username}}</span><img src="../static/img/logout.png" style="float:right;width: 40px;height: 40px;margin-top: 10px;" @click="logout"></div>
        </el-header>
        <el-container>
            <el-aside id="aside" style="width: 300px;">
                <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        active-text-color="#ffd04b"
                        style="height: 100%;"
                >
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>我的考勤</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1" @click="daka">打卡记录</el-menu-item>
                            <el-menu-item index="1-2" @click="shenpi">审批记录</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <iframe style="width: 100%;" frameborder="no" scrolling="no"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>

</body>
<script src="../static/vue/vue.js"></script>
<script src="../static/element_ui/index.js"></script>
<script src="../static/js/jquery-3.3.1.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '管理员'
        },
        methods: {
            userManage: function () {

            },
            daka() {
                $('iframe').attr('src','/daka');
            },
            shenpi() {
                $('iframe').attr('src','/shenpi');
            },
            getUser() {
                $.ajax({
                    url: '/user/getUserInfo',
                    type: 'get',
                    data: {},
                    dataType: 'json',
                    success: (data) => {
                        if(data.code !== 00){
                            window.location.href="/login";
                        }
                        this.username = data.data.username;
                    },
                    error: (data) => {
                        this.$message({
                            message: data.msg,
                            type: 'warning'
                        });
                    }
                });
            },
            logout: function () {
                $.ajax({
                    url: '/user/logout',
                    type: 'get',
                    success: data => {
                        window.location.href="/login";
                    }
                });
            }
        },
        created: function () {
            console.log("不知道为什么，用$('.el-aside')就是获取不到css，并且改变，所以以后尽量用id去获取节点元素");
            $('#aside').css('height',$(window).height() - 100);
            $('iframe').css('height',$(window).height()*0.85);
            this.getUser();
        }
    });
</script>
</html>
